<template>
  <user-select-search  v-model="userName" v-if="type==1" placeholder="请选择负责人" class="full-width" key="1"></user-select-search>
  <user-select-search  v-model="userMultiple" v-else-if="type==2" :multiple="type==2" placeholder="请选择负责人" class="full-width" key="2"></user-select-search>
  <dept-select-tree  v-else-if="type==3"  v-model="deptIds"  :multiple="true"
                     :flat="true"  placeholder="请选择部门">
  </dept-select-tree>
  <role-select  v-else-if="type==4" placeholder="请选择角色"  filterable clearable  v-model="roleId"></role-select>
  <dict-select  v-else-if="type==5"  placeholder="请选择变量"  v-model="varIds" clearable dist-key="flow_participant"></dict-select>
  <el-input v-else v-model="participant" placeholder="请输入工单字段"></el-input>
</template>
<script>
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import RoleSelect from '../../../../components/Common/RoleSelect'
    import DictSelect from '../../../../components/DictSelect/index'
    import UserSelectSearch from '../../../../components/Common/UserSelectSearch'
    import DeptSelectTree from '@/components/Common/DeptSelectTree'

    export default {
        name: "ParticipantInput",
        props:{
            type:{
                type:Number,
                defalut:undefined
            },
            value:{
                type:[String,Number,Array],
                default:undefined
            },
        },
        components: {
          DeptSelectTree,
          UserSelectSearch,
          DictSelect,
          RoleSelect
        },
        watch: {
          type(val,oldValue){
            if(oldValue!=0){
              this.$emit("input", undefined);
            }
          }
        },
        data() {
            return {
            }
        },
        created() {
        },
        computed: {
          userName: {
            get() {
              return typeof this.value=='string'?this.value:""
            },
            set(v) {
              this.$emit('input', v)
            }
          },
          userMultiple: {
            get() {
              return typeof this.value=='object'?this.value:[]
            },
            set(v) {
              this.$emit('input', v)
            }
          },
          deptIds: {
            get() {
              return typeof this.value=='object'?this.value:[]
            },
            set(v) {
              this.$emit('input', v)
            }
          },
          roleId: {
            get() {
              return isNaN(this.value)?undefined:this.value*1
            },
            set(v) {
              this.$emit('input', v)
            }
          },
          varIds: {
            get() {
              return typeof this.value=='string'?this.value:undefined
            },
            set(v) {
              this.$emit('input', v)
            }
          },
          participant: {
            get() {
              return typeof this.value=='string'?this.value:""
            },
            set(v) {
              this.$emit('input', v)
            }
          },
        },
        methods: {
        }
    }
</script>
<style>

</style>
